import {useAuth} from "../hooks/index.js";
import React, {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import * as echarts from 'echarts';
import {
    Box, Button, Container,
    Flex,
    FormControl,
    FormLabel,
    Heading, HStack,
    Input, InputGroup, InputRightElement, Radio,
    RadioGroup,
    Stack, Text,
    useColorModeValue, useToast
} from "@chakra-ui/react";
import {SearchIcon} from "@chakra-ui/icons";
import dayjs from "dayjs";
import {DatePicker} from "antd";
import {getAllDoctor, getAllDoctorInDate} from "../api/doctor.js";
import {handleResultNoRoute} from "../api/result.js";
import ReactEcharts from "echarts-for-react";
import {getAllOrder, getAllOrderInDate} from "../api/order.js";
import ReactECharts from 'echarts-for-react';
import {getAllMedicine, getAllMedicineStatistic} from "../api/medicine.js";

const {RangePicker} = DatePicker;

const dateFormat = 'YYYY-MM-DD';

export default function HomePage() {
    // 用于弹出提示
    let toast = useToast()
    const {isAuth} = useAuth()

    // 身份验证
    useEffect(() => {
        isAuth()
    }, []);

    // 日期表单
    const [start, setStart] = useState('2023-01-01')
    const [end, setEnd] = useState('2024-01-01')

    const [orders, setOrders] = useState([])

    useEffect(() => {
        getAllOrderInDate({start, end}).then(r => {
            setOrders(r.data)
            handleResultNoRoute(r, toast, '', '查询成功')
            setOptions({
                title: {
                    text: '医生期间问诊数量统计'
                },
                xAxis: {
                    data: [...(r.data.doctors.map(d => d.name))]
                },
                yAxis: {
                    type: 'value'
                },
                series: {
                    type: 'bar',
                    data: [...(r.data.doctors.map(d => d.number))]
                },
            })
            setStudentOpts({
                title: {
                    text: '学生期间就医数量统计'
                },
                xAxis: {
                    data: [...(r.data.students.map(d => d.name))]
                },
                yAxis: {
                    type: 'value'
                },
                series: {
                    type: 'bar',
                    data: [...(r.data.students.map(d => d.number))]
                },
            })
        })
        getAllMedicineStatistic().then(r => {
            handleResultNoRoute(r, toast, '', '查询成功')
            console.log(r.data)
            setMedicineOpts({
                title: {
                    text: '各分类药品数量统计'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '详细',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            ...(r.data.map(d => {
                                    return {
                                        value: d.number,
                                        name: d.name
                                    }
                                }
                            ))
                        ]
                    }
                ]
            })
        })
    }, []);

    // options是echart图表的配置选项
    let defaultOptions = {
        xAxis: {
            data: ['1', '2']
        },
        yAxis: {
            data: [1, 2]
        }
    }

    const [options, setOptions] = useState({...defaultOptions})
    const [studentOpts, setStudentOpts] = useState({...defaultOptions})
    const [medicineOpts, setMedicineOpts] = useState({...defaultOptions})

    return (
        <Box w={'100%'} className={useColorModeValue('', 'dark')}
             bg={useColorModeValue('gray.50', 'gray.900')}>
            <HStack w={'100%'} flexDirection={'row'} justifyContent={'space-between'}>
                <HStack spacing={4}>
                    {/*根据日期搜索*/}
                    <HStack ml={8}>
                        <Text>日期</Text>

                        <RangePicker
                            defaultValue={[dayjs('2023-01-01', dateFormat),
                                dayjs('2024-01-01', dateFormat)]}
                            format={dateFormat}
                            onChange={(date, dateStr) => {
                                console.log(date, dateStr)
                                setStart(dateStr[0])
                                setEnd(dateStr[1])
                            }}
                        />
                        <Button onClick={() => {
                            getAllOrderInDate({start, end}).then(r => {
                                handleResultNoRoute(r, toast, '', '查询成功')
                                setOrders(r.data)
                                // console.log(orders)
                                setOptions({
                                    title: {
                                        text: '医生期间问诊数量统计'
                                    },
                                    xAxis: {
                                        data: [...(r.data.doctors.map(d => d.name))]
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: {
                                        type: 'bar',
                                        data: [...(r.data.doctors.map(d => d.number))]
                                    },
                                })
                                setStudentOpts({
                                    title: {
                                        text: '学生期间就医数量统计'
                                    },
                                    xAxis: {
                                        data: [...(r.data.students.map(d => d.name))]
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: {
                                        type: 'bar',
                                        data: [...(r.data.students.map(d => d.number))]
                                    },
                                })
                            })
                            getAllMedicineStatistic().then(r => {
                                handleResultNoRoute(r, toast, '', '查询成功')
                                console.log(r.data)
                                setMedicineOpts({
                                    title: {
                                        text: '各分类药品数量统计'
                                    },
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        top: '5%',
                                        left: 'center'
                                    },
                                    series: [
                                        {
                                            name: '详细',
                                            type: 'pie',
                                            radius: ['40%', '70%'],
                                            avoidLabelOverlap: false,
                                            itemStyle: {
                                                borderRadius: 10,
                                                borderColor: '#fff',
                                                borderWidth: 2
                                            },
                                            label: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    fontSize: 40,
                                                    fontWeight: 'bold'
                                                }
                                            },
                                            labelLine: {
                                                show: false
                                            },
                                            data: [
                                                ...(r.data.map(d => {
                                                        return {
                                                            value: d.number,
                                                            name: d.name
                                                        }
                                                    }
                                                ))
                                            ]
                                        }
                                    ]
                                })
                            })
                        }}>搜索</Button>
                    </HStack>
                </HStack>
            </HStack>
            {/*↓柱状图↓*/}
            <Box mt={6}>
                {/*echart统计图*/}
                <ReactECharts
                    option={options}
                    notMerge={true}
                    lazyUpdate={true}
                />
            </Box>
            <Box
                bg={useColorModeValue('gray.50', 'gray.900')}>
                {/*echart统计图*/}
                <ReactECharts
                    option={studentOpts}
                    notMerge={true}
                    lazyUpdate={true}
                />
            </Box>
            {/*↑柱状图↑*/}
            {/*↓饼图↓*/}
            <Box mt={12}
                 w={'100%'}
                 bg={useColorModeValue('gray.50', 'gray.900')}>
                {/*echart统计图*/}
                <ReactECharts
                    option={medicineOpts}
                    notMerge={true}
                    lazyUpdate={true}
                />
            </Box>
            {/*↑饼图↑*/}
        </Box>
    )
}